import React, { Component, Fragment } from "react";
import { CopyToClipboard } from 'react-copy-to-clipboard';
// antd
import { Button, Tag, Tooltip, message, Divider } from "antd";
import { CopyTwoTone, SyncOutlined } from '@ant-design/icons';
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
import AccountModal from "../manage/components/AccountModal";
import ChangePasswordModal from "./components/ChangePasswdModal";
import { Account_prop } from "../../constants";
// api
import http from '../../utils/request';

class AccountList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            pageNumber: 1,
            pageSize: 10,
            keyWork: "",
            // 表头
            tableConfig: {
                url: "accountList",
                method: "get",
                checkbox: true,
                thead: [
                    { 
                        title: "账号名称/uid", 
                        key: "uid",
                        render: (text, rowData) => {
                            return (
                                <div>
                                <a href={rowData.id}>{rowData.name}</a>
                                <br></br>
                                {rowData.uid}
                                </div>
                            )
                        }
                    },
                    { 
                        title: "所属平台", 
                        dataIndex: "platform", 
                        key: "platform",
                    },
                    { 
                        title: "AccessKeyID/账号", 
                        dataIndex: "access_key_id", 
                        key: "access_key_id",
                        render: access_key_id => {
                            return (
                                <span>
                                    {access_key_id}
                                    <CopyToClipboard 
                                        text={access_key_id}
                                        onCopy={this.onCopy}>
                                        <CopyTwoTone />
                                    </CopyToClipboard>
                                </span>
                            )
                        }
                    },
                    { title: "事业部", dataIndex: "department", key: "department" },
                    { 
                        title: "用途标签", 
                        dataIndex: "tag", 
                        key: "tag",
                        render: (rowData => {
                            return (
                                <div>
                                    {
                                      rowData.map(tag => (
                                        <Tooltip title={Account_prop[tag]["tooltip"]} >
                                            <Tag color={Account_prop[tag]["color"]} key={tag}>{tag.toUpperCase()}</Tag>
                                        </Tooltip>
                                      ))
                                    }
                                </div>
                            )
                            // return (
                            //     <div>
                            //       {rowData.map(text => {
                            //           switch (text) {
                            //             case 'dns':
                            //               return <Tooltip title="域名解析">
                            //                      <Tag color='geekblue' key={text}>{text}</Tag>
                            //                      </Tooltip>;
                            //             case 'ecs':
                            //               return <Tooltip title="弹性资源" >
                            //                         <Tag color='green' key={text}>{text}</Tag>
                            //                     </Tooltip>;
                            //             case 'sas':
                            //               return <Tooltip title="云安全" >
                            //                         <Tag color='volcano' key={text}>{text}</Tag>
                            //                     </Tooltip>;
                            //             default:
                            //               return null;
                            //           }
                            //       })}
                            //     </div>  
                            //   );
                        })
                    },
                    { 
                        title: "云安全分数", 
                        dataIndex: "sas_grade", 
                        key: "sas_grade",
                        render: (rowData => {
                            return (
                                <div>
                                    <Tag color={rowData >= 85 ? 'blue' : 'red'} key={rowData}>{rowData}</Tag>
                                </div>
                            )})
                    },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Tooltip title="手动同步ECS到CMDB PRO，通过爬虫获取可能会请求超时，过几分钟后刷新页面即可。">
                                    <Button onClick={() => this.sync_ecs({ account_id: rowData.id })} 
                                            size='small' type="link" icon={<SyncOutlined />} />
                                    </Tooltip>
                                    <Divider type="vertical"/>
                                    <Action>
                                        <Action.Button onClick={() => this.callChangePasswordModal({status: true, account_id: rowData.id})}>改密</Action.Button>
                                        <Action.Button onClick={() => this.accountModal({status: true, account_id: rowData.id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "账号名称", 
                        name: "name__contains", 
                        placeholder: "请输入账号名称"
                    },
                    { 
                        type: "Input",
                        label: "AK/登陆名", 
                        name: "access_key_id__contains", 
                        placeholder: "请输入ak或登陆账号名"
                    },
                    { 
                        type: "SelectComponent",
                        label: "平台类型", 
                        url: "accountTypeList",
                        method: "get",
                        name: "platform",
                        propsKey: {
                            label: "platform",
                            value: "platform"
                        },
                        style: { width: "200px" },
                        placeholder: "请选择平台类型"
                    },
                ]
            },
            // 表的数据
            data: []
        };
    }
    
    /** 生命周期挂载完成 */
    componentDidMount(){}

    /** 同步余额 */
    sync_ecs = (params) => {
        console.log(params)
        const account_id = params.account_id;
        http.post(`/sync/ecs/${account_id}`).then(response => {
            console.log(response.data)
            const data = response.data
            message.success(data.msg)
        }).catch(err => {
            message.error(err)
        })
    }
    // 复制
    onCopy = () => {
        this.setState({copied: true});
        message.success('Copy success！')
    }

    // 获取子组件实例
    getChildRef = (ref) => { this.tableComponent = ref;} // 存储子组件
    // 获取弹窗子组件实例
    getAccountModalRef = (ref) => { this.child = ref }
    /** 修改密码 */
    getChangePassModalRef = (ref) => { this.child2 = ref }

    // 显示弹窗
    accountModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    callChangePasswordModal = (data) => {
        console.log(data)
        this.child2.visibleModal(data);
    }

    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }

    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig} >
                    <Button type="primary" ref="accountAdd" onClick={() => this.accountModal({ status: true })}>添加账号</Button>
                </TableComponent>
                <AccountModal onRef={this.getAccountModalRef} />
                <ChangePasswordModal onRef={this.getChangePassModalRef} />
            </Fragment>
        )
    }
}
export default AccountList;